<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js'%}"></script>
</head>


<body>

<div style="width:100%;text-align:center">
  <h1>欢迎注册XXX学校</h1>
  <form id="register" action="register" method="post">
       {% csrf_token %}
      用户名:<input id="username" type="text" name="username" onblur="ajax2()"/><span style="color:red;" id="error"></span><br>
      密   码:<input type="password" name="pwd"/><br>
<!--      角   色：<select name="rolse" id="rolse">
      <option value="Aministrators">管理员</option>
      <option value="Teachers">教师</option>
      <option value="Students">学生</option>
              </select>
-->
              <input type="submit" value="提交注册">
  </form>
</div>

<script type="text/javascript">
//    function createXMLHttpRequest(){
//            try {
//                return new XMLHttpRequest();
//            } catch (e) {
//                try {
//                    return new ActiveXObject("Msxml2.XMLHTTP");
//                } catch (e) {
//                    return new ActiveXObject("Microsoft.XMLHTTP");
//                }
//            }
//        }
//	function send(){
//	    //step1:创建XMLHttpRequest对象
//	    var xmlHttp = createXMLHttpRequest();
//	    //step4:onreadystatechange事件函数监听结果
//		xmlHttp.onreadystatechange = function(){
//
//		    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//			    if(xmlHttp.responseText == "True"){
//				    document.getElementById("error").innerText="用户名已被注册";
//					document.getElementById("error").textContent="用户名已被注册";
//				}else {
//				    document.getElementById("error").innerText="";
//					document.getElementById("error").textContent="";
//				}
//
//			}
//		};
//        //step2:调用open()方法打开与服务器的连接；
//		xmlHttp.open("POST", "/mng/registerajax", true);
//		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//		var username = document.getElementById("username").value;
//		//step3:调用send()方法发送请求；
//		xmlHttp.send("username=" + username);
//	}
	//jquery ajax 检测账户
	function ajax2(){
	   var username = $("#username").val()

	   $.ajax({
	       url: "mng/user_ajax",
	       data:{username:username},
	       type: "POST",
	       success: function(data){
	           console.log(data) //回调涵数结果
	           if(data === 'True') {
	                $('#error').html('用户已存在') //为span标签error赋值
	           }else{
	                $('#error').html("")
	           }
	       },
	   })
	}
</script>
</body>

</html>